@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';

$sizes: 'xs', 's';

.wrapper {
  position: relative;

  overflow: hidden;
  display: flex;
  flex-wrap: wrap;

  width: 100%;
  max-width: 100%;

  @each $size in $sizes {
    &[data-size=#{$size}] {
      @include composite-var($tag-row, $size);
    }
  }
}

.visibleRow {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;

  @each $size in $sizes {
    &[data-size=#{$size}] {
      @include composite-var($tag-row, $size);
    }
  }
}

.hiddenRow {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  flex-wrap: wrap;

  width: 100%;

  visibility: hidden;

  @each $size in $sizes {
    &[data-size=#{$size}] {
      @include composite-var($tag-row, $size);
    }
  }
}

.hiddenMoreButton {
  position: absolute;
  left: 0;
  visibility: hidden;
}
